<template>
    <div class="container">
        <!-- 点击icon跳转首页 -->
        <div class="home-icon">
            <router-link to="/"><img src="@/assets/imgs/LeftList/首页.png" class="icon"> </router-link>
        </div>
        <div class="crumb">
            <router-link :to="{name: currentNav}" tag="div" class="title">{{currentNav}}</router-link>
            <router-link :to="{name: currentSubNav}" tag="div" class="title"><span>></span>{{currentSubNav}}</router-link>
            <router-link :to="{name: currentThirdNav}" tag="div" class="text" v-if="currentThirdNav"><span>></span>{{currentThirdNav}}</router-link>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'BreadCrumb',
  computed: {
    ...mapState({
      currentNav: 'currentNav',
      currentSubNav: 'currentSubNav',
      currentThirdNav: 'currentThirdNav'
    })
  }
}
</script>
<style lang="scss" scoped>
.container{
    height: 50px;
    background-color: #f7f7f7;
    border: #bbbbbb;
    display: flex;
    align-items: center;
    // 图标位置
    .icon{
        height: 20px;
        width: 20px;
        float: left;
        margin-left: 100px;
    }
    // 导航文字提示位置
    .crumb{
        position: absolute;
        right: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 13.5px;
        cursor: pointer;
        .title{
            float: left;
            color: #666666;
            margin-right: 5px;
            span {
              display: inline-block;
              margin: 0 3px;
              color: #72c02c;
            }
        }
        .text {
            float: right;
            color: #72c02c;
        }
    }
}
</style>
